<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
		<link rel="stylesheet" href="css/mint-style.css">
		 <script src="js/vue_resource.js"></script>
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
        <script src="js/vue_resource.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.conclusionContainer{
				display: flex;
				flex-direction: column;
				width: 100vw;
			}
			.conclusionTitle{
				font-size: 15px;
				margin-top: 10px;
				margin-left: 10px;
			}
			.redStar{
				color: red;
			}
			
			.conclusionInput{
				font-size: 12px;
				margin-top: 5px;
				margin-left: 15px;
				margin-right: 15px;
				background-color: #f0f0f0;
				border: 0px;
				padding: 5px;		
			}

		</style>
	<body style="background-color: white;">
		<div id="app">
			<div class="conclusionContainer">
				
				<div class="conclusionTitle"  v-if="trainingClass.trainingType ==1"><span class="redStar">*</span>总结</div>
				<div class="conclusionTitle"  v-if="trainingClass.trainingType ==2"><span class="redStar">*</span>发现本班（站）存在的问题及应采取的措施</div>
				<div class="conclusionTitle"  v-if="trainingClass.trainingType ==3"><span class="redStar">*</span>训练过程</div>
				<textarea style="min-height: 100px;" v-model="trainingClass.conclusion" placeholder="请输入训练过程" class="conclusionInput"></textarea>
				
				
				<div class="conclusionTitle" v-if="trainingClass.trainingType ==2">已制定的安全措施落实情况</div>
				<div class="conclusionTitle" v-if="trainingClass.trainingType ==3">评价</div>
				<textarea style="min-height: 50px;"  v-if="trainingClass.trainingType !=1" v-model="trainingClass.trainingResult" placeholder="请输入训练过程" class="conclusionInput"></textarea>
				
				<div class="gally" style="margin-top: 20px;">
				    <div class="photoConatiner"  v-for="(item,index) in imageList">
				        <img class="image"
                            :style="{'margin-top': (index>2?'6vw':'0px')}"
                            :src="item" />
				        <img  class="del-image"
                              @click.stop="deleteImage(index)"
				              :style="{'top': (index>2?'6vw':'0px')}"
				              src="img/del_image.png"/>
				    </div>
				    <img
                        @click.stop="getImage()"
				         v-if="imageList.length < 9"
				         :style="{'margin-top': (imageList.length>2?'6vw':'0px')}"
				         class="image"
				         src="img/add_icon.png" />
				    
				</div>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  trainingClass: {
              },
              imageList: []
		     
		  },
		  created() {
              window.getTrainingClass = this.getTrainingClass
              window.getImageList = this.getImageList
              window.submit = this.submit
		  },
		  methods:{
              submit(trainingClassId){
                  let length = this.imageList.length
                  let urlArray = []
                  let localArray = []
                  let formData = new FormData()
                  for(let i=0;i<length;i++){
                      if(this.imageList[i].indexOf(serverUrl) == -1){
                          let file = this.blobToFile(this.base64ToBlob(this.imageList[i]),"image_"+i)
                          localArray.push("")
                          formData.append("file",file)
                      }else {
                          urlArray.push(this.imageList[i].replace(serverUrl,""))
                      }
                  }

                  if(localArray.length > 0) {
                      let url = serverUrl+"fileUpload/uploadFiles"
                      this.$http.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                      .then(res => {
                          urlArray = urlArray.concat(res.data.data)
                          let params = {
                              trainingClassId:trainingClassId,
                              conclusion: this.trainingClass.conclusion,
                              trainingResult: this.trainingClass.trainingResult,
                              trainingImage: JSON.stringify(urlArray)
                          }
                          WebViewJavascriptBridge.callHandler('submitInfo',params,function(response) {
                                              
                          });
                      })
                  }else{
                      let params = {
                          trainingClassId:trainingClassId,
                          conclusion: this.trainingClass.conclusion,
                          trainingResult: this.trainingClass.trainingResult,
                          trainingImage: JSON.stringify(urlArray)
                      }
                      WebViewJavascriptBridge.callHandler('submitInfo',params,function(response) {
                                          
                      });
                  }
              },
              getTrainingClass(trainingClass){
                  this.trainingClass = trainingClass
                  let array = JSON.parse(trainingClass.trainingImage)
                  for(let i=0;i<array.length;i++){
                      array[i] = serverUrl+array[i]
                  }
                  this.imageList =array
              },
              deleteImage (index) {
                  this.imageList.splice(index,1)
              },
              getImageList (imageList) {
                  this.imageList = this.imageList.concat(imageList)
              },
              getImage () {
                  var params = {
                    count:this.imageList.length
                  }
                   WebViewJavascriptBridge.callHandler('chooseImage',params,function(response) {
                                       
                   });
              },
              base64ToBlob(base64Data) {
               let arr = base64Data.split(',')
               let fileType = arr[0].match(/:(.*?);/)[1]
               let bstr = atob(arr[1])
               let l = bstr.length
               let u8Arr = new Uint8Array(l)
                   
               while (l--) {
                   u8Arr[l] = bstr.charCodeAt(l);
               }
               return new Blob([u8Arr], {
                   type: fileType
               });
            },
            blobToFile(newBlob, fileName) {
                let array = newBlob.type.split('/')
                let file = new File([newBlob], fileName+'.'+array[1], {type: newBlob.type, lastModified: Date.now()});
                

                return file;
            }
		  }
		})		
		</script>
</html>
